<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notifications Center</title>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script>
var Notifications = top.Tian.Class(top.Tian.Embeded, {
    dictionaries: {
        'en': {
            'filter': 'Filter',
            'empty': 'Empty',
            'confirm': 'Notifications can NOT be restored after this action, continue?'
        },
        'zh-CN' : {
            'filter': '过滤',
            'empty': '清空',
            'confirm': '通知内容清空后将无法恢复，是否继续？'
        }
    },
    
    onRun: function () {
        top.Tian.Embeded.prototype.onRun.apply(this, arguments);
        
        // i18n
        $('#filter').val(this.i18n('filter'));
        $('#empty').val(this.i18n('empty'));
        
        // attach events
        $('#mask').bind('keypress', function(event) {
            if (event.which == 13) {
                $('#filter').click();
                event.preventDefault();
            }
        });
        $("#filter").bind('click', top.Tian.Function.bind(this.onFilter, this));
        $("#empty").bind('click', top.Tian.Function.bind(this.onEmpty, this));
        
        var os = this.getOS();
        if (!os) {
            return;
        }
        os.getEvents().register('notify', this, this.onNotify);
        
        // add old notifications
        var notifications = (os.titleBar && os.titleBar.notifications) ? os.titleBar.notifications : [];
        for(var i=0; i<notifications.length; i++) {
            $('#notifylist').append('<li>' + notifications[i] + '</li>');
        }
    },
    
    destroy: function () {
        // remove event listeners
        $('input').unbind();
        this.getOS().getEvents().unregister('notify', this, this.onNotify);
        
        top.Tian.Embeded.prototype.destroy.apply(this, arguments);
    },
    
    onFilter: function(event) {
        var mask = $('#mask').val().toLowerCase();
        if (!mask || mask.length<1) {
            // show all items
            $('#notifylist li').show();
            return;
        }
        
        // show masked items
        $('#notifylist li').each(function(idx) {
            var notification = $(this).text().toLowerCase();
            if (notification.indexOf(mask) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    },
    
    onEmpty: function(event) {
        if (!confirm(this.i18n('confirm'))) {
            return;
        }
        
        // empty dom
        $('#notifylist').empty();
        // empty data
        var os = this.getOS();
        if (os && os.titleBar && os.titleBar.clearNotifications) {
            os.titleBar.clearNotifications();
        }
    },

    onNotify: function(event) {
        if (event && event.notification) {
            $('#notifylist').append('<li>' + event.notification + '</li>');
        }
    },
    
    CLASS_NAME: 'Notifications'
});

function tianMain(options) {
    return new Notifications(options);
}
</script>

<style type='text/css'>
body {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
}

#controls {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 30px;
    padding: 5px;
    text-align: center;
}

#mask {
    width: 300px;
    border: solid 1px gray;
}

#filter, #empty {
    width: 80px;
}

#notifications {
    position: absolute;
    top: 40px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

#notifylist {
    margin: 0px;
}

#notifylist li {
    border-bottom: dotted 1px gray;
}
</style>

</head>
<body>
<div id='controls'>
    <input id='mask' type='text' />
    <input id='filter' type='button' value='Filter' />
    <input id='empty' type='button' value='Empty' />
</div>
<div id='notifications'>
    <ol id='notifylist'></ol>
</div>
</body>
</html>
